<!-- 地图选点 -->
<template>
	<view class="vk-data-input-map">
		<u-input
			v-if="showInput"
			type="select"
			:value="textCom"
			:modelValue="textCom"
			:placeholder="placeholder"
			:input-align="inputAlign"
			@click="open"
		></u-input>

		<u-picker ref="address" mode="region"></u-picker>
	</view>
</template>

<script>
/**
 * map 地图
 * @description 地图选址
 * @property {String} placeholder 提示
 * @property {String} input-align 输入框文字的对齐方式 可选 left right center
 * @property {Boolean} show-input 是否显示input 默认true
 * @event {Function} confirm 点击确定的事件
 * @event {Function} backspace 键盘退格键被点击
 * @example <vk-data-input-map v-model="form1.position" placeholder="点击选择定位,方便用户查找" />
 */
export default {
	name: "vk-data-input-map",
	emits: ["update:modelValue", "input", "confirm"],
	props: {
		// 值
		value: {},
		modelValue: {},
		// 提示
		placeholder: {
			type: String,
			default: ""
		},
		inputAlign: {
			type: String
		},
		// 是否显示input
		showInput: {
			type: Boolean,
			default: true
		}
	},
	data: function() {
		// 组件创建时,进行数据初始化
		return {};
	},
	mounted() {
		this.init();
	},
	methods: {
		// 初始化
		init() {
			let that = this;
			let { valueCom: value } = that;
		},
		// 更新表单值
		_updateValue(data) {
			let that = this;
			let { valueCom: value, vk } = that;
			if (!value) value = {};
			that.$set(value, "name", data.name); // 地址名称
			that.$set(value, "latitude", data.latitude); // 纬度
			that.$set(value, "longitude", data.longitude); // 经度
			if (data.province) that.$set(value, "province", data.province);
			if (data.city) that.$set(value, "city", data.city);
			if (data.area) that.$set(value, "area", data.area);
			that.$set(value, "address", data.address); // 详细地址
			that.$set(value, "formatted_address", data.formatted_address); // 完整地址
			that.$emit("input", value);
			that.$emit("update:modelValue", value);
			that.$emit("confirm", value);
		},
		// 打开地图选址
		open() {
			let that = this;
			let { valueCom: value, vk } = that;
			if (!value) value = {};
			uni.chooseLocation({
				latitude: value.latitude,
				longitude: value.longitude,
				success: function(data) {
					data.formatted_address = data.address;
					data.address = "";
					let text = `${data.formatted_address}`;
					let res = that.$refs.address.regionDiscern(text);
					if (res.code == 0) {
						vk.pubfn.objectAssign(data, res.data);
					}
					that._updateValue(data);
				}
			});
		}
	},
	watch: {
		valueCom: {
			deep: true,
			handler(newVal, oldVal){
				let that = this;
				try {
					let formatted_address = `${newVal.province.name}${newVal.city.name}${newVal.area.name}${newVal.address}`;
					if (newVal.formatted_address !== formatted_address) {
						that.$set(newVal, "formatted_address", formatted_address); // 更新完整地址
						that._updateValue(newVal);
					}
				} catch(err){}
			}
		}
	},
	// 计算属性
	computed: {
		valueCom() {
			// #ifndef VUE3
			return this.value;
			// #endif

			// #ifdef VUE3
			return this.modelValue;
			// #endif
		},
		textCom() {
			let that = this;
			let { valueCom: value } = that;
			let str = "";
			if (value && value.latitude !== undefined && value.longitude !== undefined) {
				if (value.name) {
					str = value.name;
				} else if (value.address) {
					str = value.address;
				} else if (value.formatted_address) {
					str = value.formatted_address;
				}
			}
			return str;
		}
	}
};
</script>

<style lang="scss" scoped>
.vk-data-input-map {
	display: contents;
	.input-map-placeholder {
		color: #c0c4cc;
		display: flex;
		align-items: center;
	}
	.input-map-placeholder.actived {
		color: #303133;
	}
	.input-map-text-one {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}
</style>
